<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/low_price.css">
    <link rel="stylesheet" href="../js/low_price.js">
    <script src="../js/htmlFont.js"></script>
    <script src="../lib/zepto/zepto.min.js"></script>
    <script src="../lib/template/template.js"></script>
    
    <script src="../lib/jquery/jquery-1.12.4.min.js"></script>
    <script src="../lib/iscroll/iscroll.js"></script>
    <title>白菜价列表功能界面</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="back_away"><a class="iconfont" href="javascript:;">&#xe7eb;</a></div>
        <div class="price_title">白菜价-淘宝内部券</div>
        <div class="dowload"><a href="javascript:;"><span class="iconfont">&#xe640;</span><p>APP下载</p></a></div>
    </header>

    <!-- tab栏 -->
    <div class="goods-list">
        <!-- 种类 -->
        <div class="goods-title wrapper" >
            <ul class="navList">

            </ul>
        </div>
        <!-- 商品 -->
        <div class="goods-content">
            <!-- <div class="details">
            中间数据渲染
            </div> -->
        </div>
    </div>

     <!-- 底部 -->
     <footer>
        <div class="footer-top">
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li class="go">返回顶部</li>
            </ul>
        </div>
        <div class="footer-footer">
            <div class="shouji">
                <a href="javascript:;">手机APP下载</a>
                <a href="javascript:;"> 慢慢买手机版</a>
                <a href="javascript:;">-掌上比价平台</a>
            </div>
            <a href="javascript:;">m.mammambuy.com</a>

        </div>
    </footer>
   
    
</body>
</html>
<!-- 导航栏模板 -->
<script type="text/template" id="goodsTitleTmp">
    {{each result as val key}}
        <!-- <li class="swiper-slide" data-id={{val.titleId}}>{{val.title}}</li> -->
        <li data-id={{val.titleId}}>
            <a href="javascript:;">{{val.title}}</a>
        </li>
    {{/each}}
</script>

<!-- 商品模板 -->
<script type="text/template" id="goodsListTmp">
    {{each result as val key}}
    <div class="details" data-id={{val.productId}}>
        <div class="left good-img"><a href="javascript:;">{{val.productImg}}</a></div>
        <div class="right">
            <div class="good-name">{{val.productName}}</div>
            <div class="good-price">{{val.productPrice}}</div>
            <div class="good-quan">
                <!-- 进度条 -->
                {{val.productCouponRemain}}
            </div>
            <div class="good-buy">
                {{val.productCoupon}}
                {{val.productHref}}
            </div>
        </div>
    </div>
    {{/each}}
</script>

<!-- 动态渲染导航栏信息 -->
<script>
    //   发送请求获取要渲染的数据
    $.ajax({
        type:'get',
        url:"//193.112.55.79:9090/api/getbaicaijiatitle",
        dataType:'json',
        success:function (res) {
            // console.log(res);
            template.config("escape", false); 
            // 准备模板字符串
            var htmlStr = template("goodsTitleTmp",res);

            // 动态的渲染数据
            $(".navList").html(htmlStr);
        }
    })
</script>

  <!-- 导航栏滑动事件 -->
<script type="text/javascript">
    
    // console.dir(myScroll.options);
</script>

<!-- 动态渲染商品信息 -->
<script>
  // 获取url的参数
  var id2=0;
  // 一刷新页面就发送请求获取渲染数据
  goodsList(id2)
//   $(".wrapper ul").width($(".wrapper ul li").width() * $(".wrapper ul li").length);
  
  $(".navList").on("click","li",function(){
        // console.log($(this));
        var id = $(this).attr("data-id");
        // console.log(id);
        //   发送请求获取要渲染的数据
        goodsList(id) 
        $(this).siblings().children().removeClass("active"); 
        $(this).children().addClass("active");


        
       
    })
  //   封装发送请求获取要渲染的数据函数
  var flag=true;
 function goodsList(str){
    $.ajax({

        type:'get',
        url:'http://193.112.55.79:9090/api/getbaicaijiaproduct',
        dataType:'json',
        data:{
            titleid:str
        },
        success:function (res) {
            // console.log(res);
            template.config("escape", false); 
            // 准备模板字符串
            var htmlStr = template("goodsListTmp",res);
            // console.log(htmlStr);
            // 动态的渲染数据
            $(".goods-content").html(htmlStr);
            var myScroll = new IScroll('.wrapper', {
                mouseWheel: true,
                scrollX:true
            });
            if(flag){
                $(".navList li").eq(0).children().addClass("active");
                flag=false;
            }
        }
    })
   }
</script>

  <!-- 点击回到顶部 -->
<script>
   $(function() {
        /* 需求模板：当__按钮__被__点击__时，效果是__返回顶部__ */
        $('.go').click(function() {
            $('html,body').stop().animate({
                scrollTop: 0
            });
        });
    });
</script>